<template>
  <Header :showMax="false"></Header>
  <div class="title">EASY MEETING</div>
  <div class="loading-panel" v-if="showLoading">
    <img src="../../assets/img/loading.gif">
    <div>正在登录............</div>
  </div>
  <div class="login-form" v-else>
    <div class="error-msg">{{errorMsg}}</div>
        <el-form :model="formData" :rules="rules" ref="formDataRef" label-width="0px" @submit.prevent>
    <!--input输入-->
    <el-form-item label="" prop="email" >
      <el-input clearable placeholder="请输入邮箱" v-model.trim="formData.email" maxlength="20" size="large">
        <template #prefix>
           <span class="iconfont icon-email"></span>
        </template>
      </el-input>
    </el-form-item>


     <el-form-item label="" prop="nickName" v-if="!isLogin">
      <el-input clearable placeholder="请输入昵称" v-model.trim="formData.nickName" maxlength="15" size="large">
        <template #prefix>
           <span class="iconfont icon-user-nick"></span>
        </template>
      </el-input>
    </el-form-item>


      <el-form-item label="" prop="password">
      <el-input clearable placeholder="请输入密码" v-model.trim="formData.password" maxlength="10" show-password size="large">
        <template #prefix>
           <span class="iconfont icon-password"></span>
        </template>
      </el-input>
    </el-form-item>



      <el-form-item label="" prop="rePassword" v-if="!isLogin">
      <el-input clearable placeholder="请再次输入密码" v-model.trim="formData.rePassword" maxlength="10" show-password size="large">
        <template #prefix>
           <span class="iconfont icon-password"></span>
        </template>
      </el-input>
    </el-form-item>



      <el-form-item label="" prop="">
        <div class="check-code-panel">
          <el-input clearable placeholder="请输入验证码" v-model.trim="formData.checkCode" size="largae">
              <template #prefix>
                <span class="iconfont icon-checkcode"></span>
              </template>
            </el-input>
            <img :src="checkCodeBase64" class="check-code" @click="changeCheckCode"/>
        </div>
      </el-form-item>

      <el-form-item label="" prop="">
         <el-button type="primary" class="login-btn" size="large"  @click="submit">{{ isLogin ? '登录' : '注册'}} </el-button>
      </el-form-item>

      <div class="bottom-link">
          <span class="a-link no-account" @click="changeOpType">{{isLogin? '没有账号' : '已有账号？'}}</span>
      </div>

  </el-form>
  </div>
</template>

<script setup>

import md5 from 'js-md5'
import { ref, reactive, getCurrentInstance,nextTick} from 'vue'
import { useRouter, useRoute } from 'vue-router'
import Header from '../../components/Header.vue'
import { el } from 'element-plus/es/locales.mjs'
import {useUserInfoStore} from '@/store/UserInfoStore'


const { proxy } = getCurrentInstance()

const router = useRouter()
const route = useRoute()
const userInfoStore = useUserInfoStore();

const formData = ref({})
const formDataRef = ref()
const isLogin  =ref(true)
const showLoading  =ref(false)
const errorMsg = ref();
const cleanVerify=()=>{
   errorMsg.value=''
}

const checkCodeBase64 = ref(null);
const changeCheckCode = async () =>{
     let result = await proxy.Request({
        url: proxy.Api.checkCode
     })
     if(!result){
       return;
     }
     checkCodeBase64.value = result.data.img;
     localStorage.setItem("uuid", result.data.uuid);
}

const changeOpType = async()=>{
    await window.electron.ipcRenderer.invoke("loginOrRegister",!isLogin.value);
    isLogin.value= !isLogin.value;
    nextTick(()=>{
        formDataRef.value.resetFields();
        formData.value = {};
        changeCheckCode();
        cleanVerify();
    })
}


const submit = async()=>{

  cleanVerify();
  if(!formData.value.email){
    errorMsg.value='请输入邮箱';
    return;
  }
 if(!isLogin.value &&!formData.value.nickName){
    errorMsg.value='请输入昵称';
    return;
  }

  if(!formData.value.password){
    errorMsg.value='请输入密码';
    return;
  }

  if(!formData.value.checkCode){
    errorMsg.value='请输入验证码';
    return;
  }

  if(!isLogin.value && proxy.Utils.isEmpty(formData.value.rePassword)){
     errorMsg.value='请再次输入密码';
     return;
  }

  if(!isLogin.value && formData.value.password!=formData.value.rePassword){
    errorMsg.value='两次输入密码不一致';
    return;
  }


  if(isLogin.value){
      showLoading.value=true;
  }

   let result = await proxy.Request({
     url: isLogin.value ? proxy.Api.login : proxy.Api.register,
     showError:false,
     showLoading:false,
     params:{
        email:formData.value.email,
        password: isLogin.value ? md5(formData.value.password) : formData.value.password,
        checkCode: formData.value.checkCode,
        nickName: formData.value.nickName,
        uuid: localStorage.getItem("uuid")
     },
     errorCallback: (response)=>{
       showLoading.value=false;
       changeCheckCode();
       errorMsg.value=response.msg;
     }
  })

  if(!result){
    return;
  }

  if(isLogin.value){
     setTimeout(async ()=>{
      await window.electron.ipcRenderer.invoke("loginSuccess",{userInfo:result.data,wsUrl:import.meta.env.VITE_WS})
      userInfoStore.setInfo(result.data);
      router.push('/home');
     },1500)
  }else{
    proxy.Message.success('注册成功，请登录');
    changeOpType();
  }
}


const rules = {
  title: [{ required: true, message: '请输入内容' }]
}


changeCheckCode();



</script>

 <style lang="scss" scoped>

  .title{
     font-size: 16px;
     height: 10px;
     -webkit-app-region :drag;
     text-align:center;
     justify-content: center;
     align-items: center;
     color: blue;
  }


   .email-select{
     width: 250px;
   }

   .loading-panel{
     height: calc(100vh - 32px);
     display: flex;
     justify-content: center;
     align-items: center;
     overflow: hidden;
     font-size: 14px;
     color: #727272;
     img {
        width: 30px;
        margin-right: 3px;
     }

   }

   .login-form{
    padding: 0px 15px;
    height: calc(100vh - 32px);
     :deep(.el-input__wrapper){
      box-shadow: none;
      border-radius: none;

    }

    .el-form-item{
        border-bottom: 1px solid #ddd;
    }



    .email-panel{
      align-items:center;
      width: 100%;
      display: flex;
      .input{
        flex: 1;
      }

     .icon-down{
       margin-left:3px;
       width:16px;
       cursor:pointer;
       border: none;

       }

    }

    .error-msg{
      line-height: 30px;
      height: 30px;
      color: #fb7373;
    }


    .check-code-panel{
      display: flex;
      .check-code{
        cursor: pointer;
        width: 120px;
        margin-left: 5px;
      }
    }

    .login-btn{
      margin-top: 20px;
      width: 100%;
    }

    .bottom-link{
      text-align: right;
      font-size: 13px;
    }

   }


</style>
